<template>
  <div>
    <div class="items">
      <div class="item" v-for="(item,index) in data" :key="index">
        <div class="item-top">
          <div class="item-left">
            <h1 style="font-size: 14px;">{{ item.name }}</h1>
            <h1 style="font-size: 18px;color: green;">{{ item.taskNum }}</h1>
            <h1>生产任务数</h1>
          </div>
          <div class="item-right">
            <h1>良品数: {{ item.goodNum }}</h1>
            <h1>不良品数: {{ item.badNum }}</h1>
            <h1>不良品率: {{ item.defectRate.toFixed(0) }}%</h1>
          </div>
        </div>
        <div class="item-bottom">
          <a-progress class="a-progress" :percent="Number(item.plannedSpeed.toFixed(0))" size="small" >
            <template #format="percent">
              <span style="color: #257dff">{{ percent }}%</span>
            </template>
          </a-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { workStepOrderResult } from '@/api/modular/main/bigScreen/bigScreenManage'
  export default {
    data() {
      return {
        data: []
      }
    },
    created() {
      workStepOrderResult().then((res) => {
        this.data = res.data.splice(0, 4)
      })
    }
  }
</script>

<style lang="less" scoped>
.items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
  font-size: 12px;
  .item {
    width: 47%;
    height: 100px;
    margin: 5px 0px;
    border-radius: 10px;
    background-color: rgba(19, 25, 47, 0.6);
    overflow: hidden;
    .item-top {
      width: 100%;
      height: 80px;
      display: flex;
      flex-flow: row nowrap;
      .item-left,.item-right {
          width: 50%;
          height: 100%;
          h1 {
            color: #257dff;
            font-size: 12px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
      }
      .item-left {
        border-right: 1px dotted #333;
      }
    }
    .item-bottom {
      padding: 0px 5px;
    }
  }
}
</style>
